<template>
	<div>
		<el-row class="row_top">
			<table class="table_top">
				<tr>
					<td> <img src="./img/list2-1.png" /> </td>
					<td> <img src="./img/list2-2.png" /> </td>
					<td> <img src="./img/list2-3.png" /> </td>
					<td> <img src="./img/list2-4.png" /> </td>
					<td> <img src="./img/list2-5.png" /> </td>
					<td> <img src="./img/list2-6.png" /> </td>
					<td> <img src="./img/list2-7.png" /> </td>
					<td> <img src="./img/list2-8.png" /> </td>
					<td> <img src="./img/list2-9.png" /> </td>
				</tr>
				<tr>
					<td><MacBook>iPad Pro</MacBook></td>
					<td>iPad Air <br /> <span class="span_rad">新款</span> </td>
					<td>iPad</td>
					<td>iPad mini <br /> <span class="span_rad">新款</span></td>
					<td>机型比较</td>
					<td>Apple Pencil</td>
					<td>智能键盘</td>
					<td>配件</td>
					<td>iOS 12</td>
				</tr>
			</table>
		</el-row>
		
		<el-row class="row_title"> 新一代 iPad，全系列亮相。 </el-row>
		
		<el-row class="row_1">
			<el-col span="5" offset="4">
				<div class="div_text1">
					<label class="label_title"> iPad Pro</label> <br />
					<span class="span_title">iPad最大的自我飞跃</span> <br />
					<el-button type="primary" size="small" class="btn_blue">购买</el-button> <br />
					<a class="a_blue">进一步了解 ></a>
				</div>
			</el-col>
			
			<el-col span="14">
				<img src="./img/3-1.jpg" />
			</el-col>
		</el-row>
		
		<el-row class="row_1">	
			<el-col span="14" offset="2">
				<img src="./img/3-2.jpg" />
			</el-col>
			
			<el-col span="5" >
				<div class="div_text1">
					<span class="span_red_small">新款</span> <br />
					<label class="label_title"> iPad Air</label> <br />
					<span class="span_title">超强，超值。</span> <br />
					<el-button type="primary" size="small" class="btn_blue">购买</el-button> <br />
					<a class="a_blue">进一步了解 ></a>
				</div>
			</el-col>
		</el-row>
		
		<el-row class="row_1">
			<el-col span="5" offset="4">
				<div class="div_text1">
					<label class="label_title"> iPad</label> <br />
					<span class="span_title">广受欢迎的iPad</span> <br />
					<el-button type="primary" size="small" class="btn_blue">购买</el-button> <br />
					<a class="a_blue">进一步了解 ></a>
				</div>
			</el-col>
			
			<el-col span="14">
				<img src="./img/3-3.jpg" />
			</el-col>
		</el-row>
		
		
		<el-row class="row_1">	
			<el-col span="14" offset="2">
				<img src="./img/3-4.jpg" />
			</el-col>
			
			<el-col span="5" >
				<div class="div_text1">
					<span class="span_red_small">新款</span> <br />
					<label class="label_title"> iPad mini</label> <br />
					<span class="span_title">身量小，你量大。</span> <br />
					<el-button type="primary" size="small" class="btn_blue">购买</el-button> <br />
					<a class="a_blue">进一步了解 ></a>
				</div>
			</el-col>
		</el-row>
		
		<!-- 机型比较 -->
		<el-row class="row_table_img">
			<el-col span="22" offset="1">
			<div class="div_table_img">
				<label class="label_title">iPad机型比较</label>
				
				<center>
				<table>
					<tr>
						<td> <img src="./img/3-5.png" /> </td>
						<td> <img src="./img/3-6.png" /> </td>
						<td> <img src="./img/3-7.png" /> </td>
						<td> <img src="./img/3-8.png" /> </td>
					</tr>
					
					<tr class="tr_title">
						<td>iPad Pro</td>
						<td>iPad Air</td>
						<td>iPad</td>
						<td>iPad mini</td>
					</tr>
					
					<tr>
						<td> 12.9 英寸和 11 英寸</td>
						<td>10.5 英寸视网膜显示屏</td>
						<td>9.7 英寸视网膜显示屏</td>
						<td>7.9 英寸视网膜显示屏</td>
					</tr> 

					<tr>
						<td> Liquid 视网膜显示屏</td>
						<td>芯片：A12 仿生</td>
						<td>芯片：A10 Fusion</td>
						<td> 芯片：A12 仿生</td>
					</tr>
					
					
					
					<tr>
						<td>芯片：A12X 仿生</td>
						<td> 触控 ID</td>
						<td>触控 ID</td>
						<td>触控 ID</td>
					</tr>
					
					<tr>
						<td>面容 ID</td>
						<td>存储容量最高达 256GB</td>
						<td>存储容量最高达 128GB</td>
						<td>存储容量最高达 256GB</td>
					</tr>
					
					<tr>
						<td>存储容量最高达 1TB</td>
						<td> 支持 Apple Pencil</td>
						<td>支持 Apple Pencil</td>
						<td> 支持 Apple Pencil</td>
					</tr>
					
					<tr>
						<td>支持 Apple Pencil</td>
						<td>(第一代)</td>
						<td>(第一代)</td>
						<td>(第一代)</td>
					</tr>
					
					<tr>
						<td>(第二代)</td>
						<td> 支持智能键盘</td>
					</tr>
					
						<tr>
						<td>  支持键盘式智能双面夹</td>
					</tr>
					
					
				</table></center>
				<a class="a_blue">看看哪款iPan适合你 ></a>
			</div>
			</el-col>
		</el-row>
		
		<el-row class="row_table_img">
			<el-col span="22" offset="1">
				<div class="div_bigImg">
					<label class="label_title"> 把你现有的iPad</label> <br />
					<label class="label_title">折抵换购成一个新的。 </label> <br/> <br />
					<span>用你符合条件的 iPad 来以旧换新，最高可获得 RMB 2445 的折抵优惠。</span><br />
					<span>立即对手上的旧设备进行折抵估价，然后让我们的折抵服务合作伙伴派人</span><br />
					<span>上门取走设备，或亲自将设备送到 Apple Store 零售店*。</span><br />
					<a class="a_blue">了解你设备的折抵估价 ></a>
					
					<img src="./img/3-9.jpg" />
				</div>
			</el-col>
		</el-row>
		
		
		
		<el-row class="rol_iconAndText">
			<el-col span="6" :offset="3">
				<div>
					<img src="./img/icon-1.png" /> <br />
					<label>分期付款</label> <br />
					<span>符合条件的信用卡用户可选择</span> <br />
					<span>灵活的分期付款方式。</span> <br />
					<a class="a_blue">进一步了解 ></a>
				</div>
				
			</el-col>
			<el-col span="6" :offset="5">
				<div>
					<img src="./img/icon-2.png" /> <br />
					<label>免费送货</label> <br />
					<span>享受免费送货上门</span> <br />
					
					<a class="a_blue">进一步了解 ></a>
				</div>
			</el-col>
		</el-row>
		
		<el-row class="row_title gray_bj"> iPad绝妙搭档。 </el-row>
		
		

		<!-- 两个一排的图片 -->
		<el-row class="row_table_imgTwo" :gutter="40">
			<el-col span="11" offset="1">
				<div class="div_img_left3">
					<label class="label_title">Apple Pencil</label> <br />
					<span>新一代 Apple Pencil，书写新篇章。</span> <br />
					<a class="a_blue">进一步了解 ></a> 
					<a class="a_blue">购买 ></a><br />
					<img src="./img/3-10.jpg" />
				</div>
				
			</el-col>
			
			<el-col span="11">
				<div class="div_img_right3">
					<img src="./img/3-11.jpg" /> <br />
					<label class="label_title">Apple Pencil</label> <br />
					<span>新一代 Apple Pencil，书写新篇章。</span> <br />
					<a class="a_blue">进一步了解 ></a> 
					<a class="a_blue">购买 ></a>
				</div>
				
			</el-col>
		</el-row>
		
		
		
		<el-row class="row_table_imgTwo" :gutter="40">
			<el-col span="11" offset="1">
				<div class="div_img_left3">
					<label class="label_title">配件</label> <br />
					<span>来看看各种保护盖、保护壳以及更多配件，帮</span> <br />
					<span>助你尽情发挥 iPad 的精彩。</span> <br />
					<a class="a_blue">选购iPad配件 ></a> 
					
					<img src="./img/3-12.jpg" />
				</div>
				
			</el-col>
			
			<el-col span="11">
				<div class="div_img_left3">
					<label class="label_title">AirPods</label> <br />
					<span>可无线充电，可语音激活 Siri，</span> <br />
					<span>妙出新境界。</span> <br />
					<a class="a_blue">进一步了解 ></a> 
					<a class="a_blue">购买 ></a><br />
					<img src="./img/3-13.jpg" />
				</div>
				
			</el-col>
		</el-row>
		
		
		<el-row class="row_title gray_bj"> 
		<br /><br />
		为什么 iPad 就是那么不一样。 </el-row>

		
		<el-row class="row_2">	
			<el-col span="13" offset="1">
				<img src="./img/3-14.jpg" />
			</el-col>
			
			<el-col span="9" >
				<div class="div_text2">
					
					<label class="label_title"> 选iPad的理由</label> <br />
					<span class="span_title">这个电脑</span> <br />
					<span class="span_title">不是一般的电脑</span> <br />
					<a class="a_blue">进一步了解 ></a>
					
				</div>
			</el-col>
		</el-row>
		
		
		
		<el-row :gutter="30" class="gray_bj">
			<el-col span="11" offset="1">
				<div class="div_img_left4">
					<label class="label_title">iOS 12</label> <br />
					<span>力量与你同在。</span> <br />
					<a class="a_blue">进一步了解 ></a> <br/>
					<img src="./img/3-15.jpg" />
				</div>
			</el-col>
			
			<el-col span="11" >
				<div class="div_img_right4">
					<div>
						<label class="label_title">增强现实</label> <br />
						<span>一个全新的世界，就在你身边。</span> <br />
						<a class="a_blue">进一步了解 ></a> <br/>
					</div>
				</div>
			</el-col>
		</el-row>
		
		
		<el-row :gutter="30" class="gray_bj">
			<el-col span="11" offset="1">
				<div class="div_img_left4">
					<label class="label_title">iCloud</label> <br />
					<span>给你一个好地方，来保存照片，文件等</span> <br />
					<span>资料</span> <br />
					<a class="a_blue">进一步了解 ></a> <br/>
					<img src="./img/3-17.jpg" />
				</div>
			</el-col>
			
			<el-col span="11" >
								<div class="div_img_left4">
					<label class="label_title">Pay</label> <br />
					<span>免现支付，就该如此便捷。</span> <br />
					<a class="a_blue">进一步了解 ></a> <br/><br />
					
					<img src="./img/3-18.jpg" />
				</div>
			</el-col>
		</el-row>
		
		
		<el-row class="row_title gray_bj"> 
		<br />
		尽享iPad的精彩。<br /> </el-row>
		
		
		<el-row class="row_2">	
			<el-col span="13" offset="1">
				<img src="./img/3-19.jpg" />
			</el-col>
			
			<el-col span="9" >
				<div class="div_text2">
					
					<label class="label_title"> 有iPad在手，</label> <br />
					<label class="label_title"> 看看如何一展身手。</label> <br />
					<span>你会发现在 iPad 上做起各种事来都非</span> <br />
					<span>常轻松简单，妙不可言。</span> <br />
					<a class="a_blue">进一步了解 ></a>
					
				</div>
			</el-col>
		</el-row>
		
		<el-row class="row_2">	
			
			<el-col span="22" offset="1" >
				<img src="./img/3-20.jpg" />
				
				<div class="div_text_3">
					<label class="label_title"> Today at Apple</label> <br />
					<span>来 Apple Store 零售店参加趣味盎然的艺术与设计</span> <br />
					<span>课程，激发你的想象力与创造力。</span> <br />
					<a class="a_blue">看看附近有哪些精彩课程 ></a>
					
					
				</div>
			</el-col>
		</el-row>
		
		
		<el-row class="row_3">	
		<div>
			<el-col span="13" offset="1">
				<img src="./img/3-21.png" />
			</el-col>
			
			<el-col span="9" >
				<div class="div_text2">
					
					<label class="label_title"> Music</label> <br />
					<span>上千万首歌曲，三个月免费聆听。</span> <br />
					<a class="a_blue">开始免费试用 ></a>
					<a class="a_blue">进一步了解 ></a>
					
				</div>
			</el-col>
			</div>
		</el-row>
		
		
		<el-row :gutter="30" class="gray_bj">
			<el-col span="11" offset="1">
				<div class="div_img_left5">
					<div>
						<label class="label_title">可拍立</label> <br />
						<span>有话说，视频来。</span> <br />
						<a class="a_blue">进一步了解 ></a> <br/>
					</div>
					<img src="./img/3-22.png" />
				</div>
			</el-col>
			
			<el-col span="11" >
				<div class="div_img_right5">
					<div>
						<label class="label_title">Swift Playgrounds</label> <br />
						<span>用 iPad 来学编程，学起来还乐趣十足。</span> <br />
						<a class="a_blue">进一步了解 ></a> <br/>
					</div>
				</div>
			</el-col>
		</el-row>
		
		
		<el-row :gutter="30" class="gray_bj">
			<el-col span="11" offset="1">
				<div class="div_img_left6">
					<div>
						<label class="label_title">iPad 教育应用</label> <br />
						<span>在课堂上大大转变学习、</span> <br />
						<span>授课和创造的方式。</span> <br />
						<a class="a_blue">进一步了解 iPad 教育应用 ></a> <br/>
						<a class="a_blue">教育选购  ></a> <br/>
					</div>
				</div>
			</el-col>
			
			<el-col span="11" >
				<div class="div_img_right6">
					<div>
						<label class="label_title">iPad 商务应用</label> <br />
						<span>多种多样的可能性，</span> <br />
						<span>让你的工作方式从此大不相同。</span> <br />
						<a class="a_blue">进一步了解 ></a> <br/>
					</div>
				</div>
			</el-col>
		</el-row>
		
		<theButton></theButton>
	</div>
</template>

<script>
	import theButton from '@/views/Homework/Apple/theButton.vue'
	export default{
		data(){
			return{
				
			}
		},components:{
			theButton
		}
	}
	
</script>

<style scoped>
	.row_top{
		text-align: center;
		margin-top: 88px;
		background: #fafafa;
		padding-top: 20px;
		padding-bottom: 20px;
		margin-bottom: 50px;
	}
	
	/* 顶部的电脑的图标一栏 */
	.table_top{
		margin: auto;
		font-size: 10px;
		color: #333;
	}
	
	.table_top .span_rad{
		font-size: 10px;
		color: #ef5602;
	}
	.table_top td{
		padding: 0 10px;
	}
	.table_top img{
		width: 75%;
	}
	
	
	.row_title{
		text-align: center;
		font-size: 62px;
		font-weight: 600;
		font-family: "黑体";
		color: #111;
	}
	/* 图文部分 */
	.row_1{
		margin-top: 80px;
		margin-bottom: 40px;
	}
	
	
	.div_text1{
		height: 255px;
		padding-top: 120px;
		background: white;
	}
	
	.row_2,.row_3{
		background: #F2F2F2;
		padding-top: 40px;
		position: relative;
	}
	.row_2 img{
		width: 100%;
	}
	
	.row_3>div{
		margin-left: 70px;
		padding-top: 40px;
		margin-right: 70px;
		height: 485px;
		background-image: linear-gradient(345deg, #d253b1, #fb6f4a);
	}
	.row_3 .div_text2{
		color: white;
		background-image: linear-gradient(345deg, #d253b1, #fb6f4a);
	}
	.row_3 .div_text2 a{
		color: white;
	}
	
	.div_text2{
		height: 335px;
		padding-top: 150px;
		background: white;
		text-align: center;
	}
	
	.label_title{
		font-size:50px ;
		font-weight: bold;
		line-height: 60px;
		font-family: "黑体";
	}
	
	
	.span_title{
		font-size:24px ;
		font-weight: 400;
		line-height: 40px;
	}
	
	.btn_blue{
		margin-top: 20px;
		margin-bottom: 10px;
	}
	
	.a_blue{
		font-size:17px ;
		line-height: 40px;
		color: #0070c9;
	}
	.a_blue:hover{
		text-decoration: underline;
	}
	
	.span_red_small{
		font-size: 12px;
		color: #ef5602;
	}
	
	/* 机型比较 */
	.row_table_img{
		background: #f2f2f2;
	}
	
	.div_table_img{
		background: white;
		text-align: center;
		padding-bottom: 60px;
		margin-bottom: 40px;
	}
	
	.div_table_img table{
		margin-top: 80px;
		margin-bottom: 50px;
		font-size: 12px;
		color: #333;
		margin-left: 200px;
	}
	.div_table_img table td{
		width:260px ;
		height: 22px;
	}
	.tr_title{
		font-size: 20px;
		font-weight: bold;
		height: 50px;
	}
	
	
	/* 大图文 */
	.div_bigImg{
		padding-top: 70px;
		text-align: center;
		background: white;
	}
	.div_bigImg img{
		margin-top: 30px;
	}
	
	
	.rol_iconAndText,.gray_bj{
		background: #f2f2f2;
	}
		.rol_iconAndText div{
		text-align: center;
		color: #333;
		font-size: 19px;
		margin-bottom: 40px;
		padding-top: 30px;
	}
	
	.rol_iconAndText label{
		font-size: 21px;
		font-weight: bold;
		line-height: 45px;
	}
	
	
	/* 两个一排的图片 */
	.row_table_imgTwo{
		background: #f2f2f2;
	}
	.div_img_left3{
		margin-top: 40px;
		padding-top: 50px;
		width: 100%;
		background: white;
		text-align: center;
	}
	.div_img_left3 img{
		margin-top: 20px;
	}
	
	.div_img_right3{
		margin-top: 40px;
		width: 100%;
		background: white;
		text-align: center;
		padding-bottom: 40px;
	}
	.div_img_right3 img{
		margin-bottom: 75px;
	}
	
	
	.div_img_left4{
		padding-top: 60px;
		background: white;
		text-align: center;
		margin-top: 30px;
	}
	.div_img_left4 img{
		margin-top: 20px;
	}
	
	.div_img_right4{
		background: url(./img/3-16.jpg) 677px;
		height: 590px;
		margin-top: 30px;
		position: relative;
	}
	.div_img_right4 div{
		position: absolute;
		top: 65px;
		text-align: center;
		color: white;
		left: 230px;
	}
	.div_img_right4 div a,.div_img_left5 a,.div_img_right5 a,.div_img_left6 a,.div_img_right6 a{
		color: white;
	}
	
	.div_img_left5{
		padding-top: 30px;
		text-align: center;
		height: 600px;
		position: relative;
		background:#793196;
		margin-top: 30px;
		color: white;
	}
	.div_img_left5 img{
		margin-top: 40px;
	}
	.div_img_right5{
		padding-top: 30px;
		text-align: center;
		background: url(./img/3-23.jpg);
		height: 600px;
		position: relative;
		background-size: cover;
		margin-top: 30px;
		color: white;
	}
	
	.div_img_left6{
		padding-top: 30px;
		text-align: center;
		background: url(./img/3-24.jpg);
		height: 600px;
		position: relative;
		background-size: cover;
		margin-top: 30px;
		color: white;
	}
	
	.div_img_right6{
		padding-top: 30px;
		text-align: center;
		background: url(./img/3-25.jpg);
		height: 600px;
		position: relative;
		background-size: cover;
		margin-top: 30px;
		color: white;
	}
	
	
	
	.div_text_3{
		position: absolute;
		text-align: center;
		top: 180px;
		left: 185px;
	}
	
</style>
